<template>
  <t-dialog v-model:visible="formVisible" header="选择图标" :footer="false" width="800px">
    <div class="choose-area">
      <div v-for="{ stem, icon } in options" :key="stem" @click="chooseIcon(icon)">
        <t-icon :name="stem" />
      </div>
    </div>
  </t-dialog>
</template>

<script setup lang="ts">
import { manifest } from 'tdesign-icons-vue-next';
import { ref } from 'vue';

import { useVisible } from '@/hooks/visible';

// 获取全部图标的列表
const options = ref(manifest);

const props = defineProps<{
  visible: boolean;
}>();

const emits = defineEmits<{
  (e: 'update:visible', visible: boolean): void;
  (e: 'choose', icon: string): void;
}>();

const { formVisible } = useVisible(props, emits);

/**
 * 选中图标
 * 关联 并 关闭模态框
 */
const chooseIcon = (name: string) => {
  emits('choose', name);
  formVisible.value = false;
};
</script>

<style lang="less" scoped>
.choose-area {
  display: flex;
  flex-wrap: wrap;
  > div {
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
    line-height: 1;

    &:hover {
      background: rgba(0, 0, 0, 0.13);
    }
  }

  overflow-y: auto;
}

.icon-show {
  > :deep(svg) {
    width: 40px;
    height: 40px;
  }
}
</style>
